<template>
  <div class="main">
    <!--  顶部  -->
    <NavBar>
      <i @click="toHomePage" class="fa fa-home" slot="scan-code" style="font-size: 1rem;margin-top: 0.15rem"></i>
      <input v-model="keyword" type="text" placeholder="请输入搜索内容" slot="search" @keyup.enter="search(keyword)">
      <i :class="{active: isActive,noActive: !isActive}"  @click="toLogin" class="fa fa-user-circle-o" slot="login"></i>
    </NavBar>
    <!--  分类  -->
    <div class="classify">
      <div class="item">
        <div :class="{itemActive: index === btn_index}"
            v-for="(item,index) in classifyList" :key="index"
             @click="btn(index,item.classify_name)">
          <div>
            <img :src="item.classify_img" alt="">
          </div>
          <div>{{item.classify_name}}</div>
        </div>
      </div>
    </div>
    <div class="content">
      <ClassifyArticles></ClassifyArticles>
    </div>
  </div>
</template>

<script>
import NavBar from "../../components/navbar/NavBar";
import ClassifyArticles from "../home/ClassifyArticles";
import axios from "axios";
export default {
  name: "Classify",
  data(){
    return{
      isActive: false,
      classifyList: '',
      btn_index: 0,
      keyword: '',
    }
  },
  components: {
    NavBar,
    ClassifyArticles
  },
  methods: {
    //去首页
    toHomePage(){
      this.$router.push('/home');
    },
    //登录
    toLogin(){
      if(sessionStorage.getItem('username')){
        //已登录，跳转我的页面
        this.$router.push('/personal');
      }else{
        //  否则跳转到登录页面
        this.$router.push('/login');
      }
    },
    //获取文章分类
    getClassifyData(){
      this.axios.get(`${process.env.VUE_APP_URL}/findClassify`)
          .then((res)=>{
            this.classifyList = res.data;
          }).catch((err)=>{
            console.log(err);
      })
    },
    //点击某一个分类
    btn(index,name){
      this.btn_index = index;
      //点击某一个分类，请求其所有新闻数据
      this.axios.get(`${process.env.VUE_APP_URL}/getOneClassifyData`,{
        params: {
          name: name
        }
      }).then((res)=>{
        //将请求到的数据通过全局事件总线传递到另一个页面
        this.$bus.$emit('classifyNewsData',res.data)
      });
    },
    //搜索功能
    search(keyword){
      // console.log(keyword);
      //this.$bus.$emit('keyword',keyword);
      this.$router.push({
        name: 'search',
        params: {
          keyword: keyword
        }
      });
    }
  },
  created() {
    //判断是否已登录
    if (sessionStorage.getItem('username')){
      this.isActive = true;
    }
    //获取文章分类数据
    this.getClassifyData();
  }
}
</script>

<style scoped>
  .active{
    color: red;
  }
  .itemActive{
    color: red;
    background-color: #DDDDDD;
  }
  .noActive{
    color: #AAAAAA;
  }
  .classify{
    position: sticky;
    top: 1.31rem;
    margin-top: 1.31rem;
    width: 100%;
  }
  .item{
    width: 100%;
    height: 4.2rem;
    background-color: white;
  }
  .item div{
    display: inline-block;
    width: 20%;
    height: 1.4rem;
  }
  .item div div{
    display: block;
    width: 100%;
    height: 0.7rem;
    line-height: 0.7rem;
    font-size: 0.45rem;
    text-align: center;
  }
  .item div div:first-child{
  }
  .item div div:first-child img{
    width: 45%;
    height: 100%;
    margin-top: 0.1rem;
  }
  .content{
    margin-top: 0.15rem;
  }
</style>